<template>
  <div class="t-table">
    <div class="header">
      <slot name="header">
        <div class="title">
          {{ title }}
        </div>
        <div class="handler">
          <slot name="handlerHeadler"></slot>
        </div>
      </slot>
    </div>
    <el-table :data="listData" style="width: 100%" @selection-change="selectionChange" v-bind="childrenProps">
      <el-table-column v-if="isShowCheckBox" type="selection" width="60px" align="center"></el-table-column>
      <el-table-column v-if="isShowIndex" type="index" label="序号" width="60px" align="center"></el-table-column>
      <template v-for="propItem in propList" :key="propItem.prop">
        <el-table-column v-bind="propItem" align="center" show-overflow-tooltip>
          <template #default="scope">
            <slot :name="propItem.slotName" :row="scope.row">
              {{ scope.row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="footer">
      <slot name="footer" v-if="showFooter">
        <div class="block">
          <span class="demonstration">完整功能</span>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageInfo.currentPage" :page-sizes="[10, 20, 30]" :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="listCount">
          </el-pagination>
        </div>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  listData: {
    type: Array,
    required: true
  },
  listCount: {
    type: Number,
    default: 0
  },
  propList: {
    type: Array,
    required: false
  },
  isShowIndex: {
    type: Boolean,
    default: false
  },
  isShowCheckBox: {
    type: Boolean,
    default: false
  },
  pageInfo: {
    type: Object,
    default: () => ({ currentPage: 0, pageSize: 10 })
  },
  childrenProps: {
    type: Object,
    default: () => ({})
  },
  showFooter: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['selectionChange', 'update:page'])

const selectionChange = (value: any) => {
  emit('selectionChange', value)
}

const handleSizeChange = (pageSize: number) => {
  emit('update:page', { ...props.page, pageSize })
}
const handleCurrentChange = (currentPage: any) => {
  emit('update:page', { ...props.page, currentPage })
}
</script>
<style lang="less" scoped>
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  // background-color: rgba(0, 0, 0, 0.2);
  background-color: rgb(189, 187, 255);
  el-table-border-color: blue;
  el-table-border: 0;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: rgba(0, 0, 0, 0.1);
}
/* 表格表头字体颜色 */
/deep/.el-table thead {
  color: #333;
  font-weight: 500;
  font-size: 15px
}
.t-table {
  margin-top: 10px;
  padding-left: 0;
}
/deep/.el-table {
  -- el-table-border: 0;
  color: #333;
}
.header {
  display: flex;
  height: 45px;
  padding:0 5px;
  justify-content: space-between;
  align-item: center;

    .title {
      font-size: 20px;
      font-weight: 700
    }

    .header{
      align-items: center;
    }
}

/deep/.el-pagination {
  --el-pagination-background-color: none;
  --el-pagination-button-disabled-background-color: none;
}
.el-table::before {


  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
</style>
